<template>
   <view class="uv-page">
      <view class="uv-page__item">
         <view class="uv-page__item__title">基础功能</view>
         <uv-tabbar
            :value="value1"
            @change="change1"
            :fixed="false"
            :placeholder="false"
            :safeAreaInsetBottom="false"
         >
            <uv-tabbar-item text="首页" icon="home" @click="click1"></uv-tabbar-item>
            <uv-tabbar-item text="放映厅" icon="photo" @click="click1"></uv-tabbar-item>
            <uv-tabbar-item text="直播" icon="play-right" @click="click1"></uv-tabbar-item>
            <uv-tabbar-item text="我的" icon="account" @click="click1"></uv-tabbar-item>
         </uv-tabbar>
      </view>
      <view class="uv-page__item">
         <view class="uv-page__item__title">显示徽标</view>
         <uv-tabbar
            :value="value2"
            :placeholder="false"
            @change="name => (value2 = name)"
            :fixed="false"
            :safeAreaInsetBottom="false"
         >
            <uv-tabbar-item text="首页" icon="home" dot></uv-tabbar-item>
            <uv-tabbar-item text="放映厅" icon="photo" badge="3"></uv-tabbar-item>
            <uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
            <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
         </uv-tabbar>
      </view>
      <view class="uv-page__item">
         <view class="uv-page__item__title">匹配标签的名称</view>
         <uv-tabbar
            :placeholder="false"
            :value="value3"
            @change="name => (value3 = name)"
            :fixed="false"
            :safeAreaInsetBottom="false"
         >
            <uv-tabbar-item text="首页" icon="home" name="home"></uv-tabbar-item>
            <uv-tabbar-item text="放映厅" icon="photo" name="photo"></uv-tabbar-item>
            <uv-tabbar-item text="直播" icon="play-right" name="play-right"></uv-tabbar-item>
            <uv-tabbar-item text="我的" name="account" icon="account"></uv-tabbar-item>
         </uv-tabbar>
      </view>
      <view class="uv-page__item">
         <view class="uv-page__item__title">自定义图标/颜色</view>
         <uv-tabbar
            :value="value4"
            @change="name => (value4 = name)"
            :fixed="false"
            :placeholder="false"
            activeColor="#d81e06"
            :safeAreaInsetBottom="false"
         >
            <uv-tabbar-item text="首页">
               <template v-slot:active-icon>
                  <image
                     class="uv-page__item__slot-icon"
                     src="https://cdn.uviewui.com/uview/common/bell-selected.png"
                  ></image>
               </template>
               <template v-slot:inactive-icon>
                  <image
                     class="uv-page__item__slot-icon"
                     src="https://cdn.uviewui.com/uview/common/bell.png"
                  ></image>
               </template>
            </uv-tabbar-item>
            <uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
            <uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
            <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
         </uv-tabbar>
      </view>
      <view class="uv-page__item">
         <view class="uv-page__item__title">拦截切换事件(点击第二个标签)</view>
         <uv-tabbar
            :value="value5"
            :fixed="false"
            @change="change5"
            :safeAreaInsetBottom="false"
            :placeholder="false"
         >
            <uv-tabbar-item text="首页" icon="home"> </uv-tabbar-item>
            <uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
            <uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
            <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
         </uv-tabbar>
      </view>
      <view class="uv-page__item">
         <view class="uv-page__item__title">去除上边框</view>
         <uv-tabbar
            :value="value7"
            :placeholder="false"
            :border="false"
            @change="name => (value7 = name)"
            :fixed="false"
            :safeAreaInsetBottom="false"
         >
            <uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
            <uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
            <uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
            <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
         </uv-tabbar>
      </view>
      <view class="uv-page__item">
         <view class="uv-page__item__title">自定义图标大小</view>
         <uv-tabbar
            :value="value7"
            @change="change1"
            :fixed="false"
            :placeholder="false"
            :icon-size="30"
         >
            <uv-tabbar-item text="首页" icon="home" @click="click1"></uv-tabbar-item>
            <uv-tabbar-item text="放映厅" icon="photo" @click="click1"></uv-tabbar-item>
            <uv-tabbar-item text="直播" icon="play-right" @click="click1"></uv-tabbar-item>
            <uv-tabbar-item text="我的" icon="account" @click="click1"></uv-tabbar-item>
         </uv-tabbar>
      </view>
      <view class="uv-page__item">
         <view class="uv-page__item__title">固定在底部(固定在屏幕最下方)</view>
         <uv-gap height="150"></uv-gap>
         <uv-tabbar
            :value="value6"
            @change="name => (value6 = name)"
            :fixed="true"
            :placeholder="true"
            :safeAreaInsetBottom="true"
         >
            <uv-tabbar-item text="首页" icon="home"> </uv-tabbar-item>
            <uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
            <uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
            <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
         </uv-tabbar>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(0);
const value2 = ref(1);
const value3 = ref('play-right');
const value4 = ref(0);
const value5 = ref(0);
const value6 = ref(0);
const value7 = ref(3);

const change1 = (e: number) => {
   value1.value = e;
   console.log('change1', e);
};
const change5 = (e: number) => {
   if (e === 1) {
      return uni.$uv.toast('请您先登录');
   } else {
      value5.value = e;
   }
};
const click1 = (e: number) => {
   value1.value = e;
};
</script>

<style lang="scss" scoped>
@use '@/common/demo.scss';

.uv-page {
   padding: 0;

   &__item {
      &__title {
         color: $uv-tips-color;
         background-color: $uv-bg-color;
         padding: 15px;
         font-size: 15px;

         &__slot-title {
            color: $uv-primary;
            font-size: 14px;
         }
      }

      &__slot-icon {
         width: 17px;
         height: 17px;
      }
   }
}
</style>
